Chakra UI v3 がリリースされた。

https://www.chakra-ui.com/blog/00-announcing-v3

Panda CSS への移行は行われず、Park UI(Ark UI) + emotion の構成になった。 また、いくつかのコンポーネントは shadcn/ui のように CLI 経由でスニペットを追加する形式になっている。

Panda CSS については、React v19 の style に期待しており、導入しない可能性があると言及されている。

We might not even have to use Panda at all. The progress of the style tag in React 19 is very promising and we give Chakra even more performance boost without any migration cost.

2023 年 3 月公開の Chakra UI のロードマップで紹介されていた Panda CSS が正式リリースされました。

https://panda-css.com/

Panda CSS は、今までの CSS in JS ライブラリの集大成のようなライブラリです。

• Zero Runtime な CSS フレームワーク
• vanilla-extract のように Type-safe
• Stitched のような Recipes/Variants 機能
• Design Token を定義する機能
• Emotion の css prop、styled-components の styled、Chakura UI の props で指定する形式など、それぞれとほぼ同等の記述をサポート

また公式ドキュメントを見れば分かりますが、多くのフレームワークでの利用が考えらており、それぞれのフレームワークについて、導入手順が丁寧に記述されています。

実際に小さなサービスで、Panda CSS への移行を試してみましたが、かなり体験が良かったです。また使ってみて感じたこととして、Panda CSS の個々の機能は独立しており薄いので、将来的に他のライブラリへ移行する場合も楽だと思いますし、逆に Panda CSS への移行も比較的楽なので Emotion や styled-components などから Zero Runtime な CSS フレームワークへの移行を考えている場合、移行先としてかなり良いのではないかと思いました。

懸念点を上げるとすれば、レスポンシブ対応など複雑な記述をしようとすると独自の記述が出てくる点や、それについての公式ドキュメントの記述が若干少なく感じる点、様々な記述が可能なため派閥が生まれそうな点などでしょうか。